import React, { Component } from 'react';
import { render } from 'react-dom';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as HomeActions from '../actions/main';
import { Link, browserHistory } from 'react-router';

import 'antd-mobile/lib/tab-bar/style';
import TabBar from 'antd-mobile/lib/tab-bar';

class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'redTab',
                hidden: false,
        };
    }

    componentWillMount(){
        let {homeacts} = this.props;
        homeacts.getHome();
    }

    renderContent(pageText) {
        return (
            <div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
                <div style={{ paddingTop: 60 }}>你已点击“{pageText}” tab， 当前展示“{pageText}”信息</div>
                <a style={{ display: 'block', marginTop: 40 }} onClick={(e) => {
                    e.preventDefault();
                    this.setState({
                        hidden: !this.state.hidden,
                    });
                }}
                >
                    点击切换 tab-bar 显示/隐藏
                </a>
            </div>
        );
    }

    render() {
        let {homeData} = this.props.homeData;
        return (
            <div>
                <p>我的</p>
                <p>他的</p>
                <p>{homeData.count}</p>
                <img id='img' src={"http://pipiyi.com/imgs/a1c117bb19f22a9a.jpg"}/>
                <img id='imglocal' src='/img/dl.app.prod.png' />
                <button onClick={() => browserHistory.goBack()}>Back</button>
                <TabBar
                    unselectedTintColor="#949494"
                    tintColor="#33A3F4"
                    barTintColor="white"
                >
                    <TabBar.Item
                        title="生活"
                        key="生活"
                        icon={'/img/dl.app.prod.png'}
                        selectedIcon={'/img/dl.app.prod.png'}
                        selected={this.state.selectedTab === 'blueTab'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'blueTab',
                            });
                        }}
                        data-seed="logId"
                    >
                        {this.renderContent('生活')}
                    </TabBar.Item>
                    <TabBar.Item
                        icon={{ uri: 'https://zos.alipayobjects.com/rmsportal/UNQhIatjpNZHjVf.png' }}
                        selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/HLkBvJOKnmOfBPO.png' }}
                        title="口碑"
                        key="口碑"
                        badge={1}
                        selected={this.state.selectedTab === 'redTab'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'redTab',
                            });
                        }}
                        data-seed="logId1"
                    >
                        {this.renderContent('口碑')}
                    </TabBar.Item>
                    <TabBar.Item
                        icon={{ uri: 'https://zos.alipayobjects.com/rmsportal/EljxLrJEShWZObW.png' }}
                        selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/LWNaMdwAFSmYBFw.png' }}
                        title="朋友"
                        key="朋友"
                        selected={this.state.selectedTab === 'greenTab'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'greenTab',
                            });
                        }}
                    >
                        {this.renderContent('朋友')}
                    </TabBar.Item>
                    <TabBar.Item
                        icon={{ uri: 'https://zos.alipayobjects.com/rmsportal/YWpPVCVOnJoCYhs.png' }}
                        selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/WadBBxOIZtDzsgP.png' }}
                        title="我的"
                        key="我的"
                        selected={this.state.selectedTab === 'yellowTab'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'yellowTab',
                            });
                        }}
                    >
                        {this.renderContent('我的')}
                    </TabBar.Item>
                </TabBar>
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        homeData: state.main
    }
}

function mapDispatchToProps(dispatch) {
    return  {
        homeacts: bindActionCreators(HomeActions, dispatch)
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Main);
